<template>
	<div v-if="lists.length>2">
		<swiper class="swiper" :circular="true" display-multiple-items="2" :autoplay="true" :interval="2000"
			:duration="3000" :disable-touch="true" easing-function="linear">
			<swiper-item v-for="(item,index) in lists" :key="index">
				<view :class="['swiper-item', 'swiper-item' + index]">{{item}}</view>
			</swiper-item>
		</swiper>
	</div>
</template>

<script>
	export default {
		props: {
			text: String
		},
		computed: {
			lists() {
				return this.text.split(',')
			}
		}
	}
</script>

<style scoped>
	.swiper {
		width: 360rpx;
		height: 68rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		box-shadow: 0px 3rpx 7rpx 0px rgba(160, 153, 153, 0.35);
	}

	.swiper-item {
		height: 68rpx;
		line-height: 68rpx;
		background: #FFFFFF;
	}

	.swiper-item1 {
		color: #3791E9;
	}

	.swiper-item2 {
		color: #E51C23;
	}

	.swiper-item3 {
		color: #1BB81E;
	}

	.swiper-item4 {
		color: #FFA400;
	}
</style>
